<!-- eslint-disable vue/valid-template-root -->
<template>
    <div id="main">
        <!-- 面包屑 -->
        <go-bread :beacklist="beacklist"></go-bread>
        <div class="wrapper">
            <!-- 头部搜索框 -->
            <div class="titleBox">
                <el-row>
                    <el-col :span="12">
                        <!-- <div class="searchBox"> -->
                        <el-input placeholder="请输入内容" v-model="goodsParams.query" class="input-with-select" clearable>
                            <el-button slot="append" icon="el-icon-search" @click="goodsSchFn"></el-button>
                        </el-input>
                        <!-- </div> -->
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-button type="primary" @click="addGoodsBtn">添加商品</el-button>
                    </el-col>
                </el-row>
            </div>
            <!-- table表格 -->
            <div class="tableBox">
                <el-table :data="goodsList" border stripe style="width: 100%">
                    <el-table-column label="#" type="index" width="50">
                    </el-table-column>
                    <el-table-column prop="goods_name" label="商品名称" width="700">
                    </el-table-column>
                    <el-table-column prop="goods_price" label="商品价格">
                    </el-table-column>
                    <el-table-column prop="goods_weight" label="商品重量">
                    </el-table-column>
                    <el-table-column label="创建时间">
                        <template slot-scope="scope">
                            <span>{{ scope.row.add_time | timer }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="editGoodsBtn(scope.row)"
                                circle></el-button>

                            <el-button type="danger" size="mini" icon="el-icon-delete"
                                @click="deteleGoodsBtn(scope.row.goods_id)" circle></el-button>

                        </template>
                    </el-table-column>

                </el-table>
                <!-- 分页器 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[5, 10, 15, 20]" :page-size="this.goodsParams.pagesize"
                    layout="total, sizes, prev, pager, next, jumper" :total="this.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { GetGoodsListPort ,DelGoodsListPort} from '@/api/goods'
import { mapGetters } from 'vuex';
import moment from 'moment';
moment.locale("zh-cn")

export default {
    data() {
        return {
            goodsParams: { //商品列表参数
                query: '',
                pagesize: 5,
                pagenum: 1,
            },
            goodsList: [], //商品列表数据
            total: 0,

        }
    },
    watch: {
        goodsList(v) {//监听当前数组条数
            // console.log(v.length);
            if (v.length == 0) {
                this.goodsParams.pagenum - 1
            }
        }
    },
    components: {
        // eslint-disable-next-line vue/no-unused-components
    },
    computed: {
        ...mapGetters(['beacklist'])
    },
    created() {
        this.getGoodsList()
    },
    methods: {
        async getGoodsList() { //获取商品列表数据
            let res = await GetGoodsListPort(this.goodsParams)
            // console.log(res.data.goods);
            if (res.meta.status == 200) {
                this.goodsList = res.data.goods
                this.total = res.data.total
            }
        },
        goodsSchFn() { //搜索按钮
            this.getGoodsList()
        },
        addGoodsBtn() {//添加商品按钮
            this.$router.push('/goods/add')
        },
        editGoodsBtn(row) { //编辑商品按钮

        },
        async deteleGoodsBtn(id) { //删除商品按钮
        console.log(id);
            let res = await DelGoodsListPort(id)
            if(res.meta.status == 200){
                this.$message.success(res.meta.msg)
                this.getGoodsList()
            }else{
                this.$message.error(res.meta.msg)
            }
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.goodsParams.pagesize = val
            this.getGoodsList()
        },
        handleCurrentChange(val) {
            this.goodsParams.pagenum = val
            // console.log(`当前页: ${val}`);
            this.getGoodsList()
        },

    },
    filters: {
        timer(v) {
            return moment(v * 1000).format('YYYY/MM/DD hh:mm:ss')
        }
    }

}
</script>
<style scoped lang="scss">
#main {
    width: 100%;
    min-width: 1126px;
    height: 100%;
    background: #fff;
}

.wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.titleBox {
    width: 100%;

    height: 40px;
    // display: flex;

    .searchBox {
        width: 24.2%;
        box-sizing: border-box;
        padding: 0 10px 0 0;
        margin-right: 10px;
    }
}

.tableBox {
    width: 100%;
    margin-top: 15px;

    /deep/ .el-table th.el-table__cell>.cell {
        font-size: 14px;
        font-weight: bold;
    }

}

.el-pagination {
    margin-top: 15px;

}
</style>